<template>
  <view class="post-detail-container">
    <!-- 自定义导航栏 -->
    <navigation-bar>
      <navigator class="top-left-navigator iconfont" hover-class="none" open-type="navigateBack">&#xe61a;</navigator>
      <view class="top-title-bar">
        帖子详情
      </view>
    </navigation-bar>
    <!-- 内容主体 -->
    <view class="main-post-detail" :style="{height: `calc(100% - ${statusbarHeight}px - ${bar_topHeight}px - 100rpx)`}">
      <z-paging ref="paging" v-model="commentList" :use-cache="false" :auto-show-back-to-top="true" @query="onQuery">
        <!-- 帖子信息 -->
        <view class="post-detail-head">
          <!-- 发布人信息面板 -->
          <view class="poster-info-hd">
            <navigator url="/subpkg/user-page/user-page" hover-class="none" class="poster-info-left">
              <view class="avatar">
                <image src="/static/user.png" style="width: 80rpx;height: 80rpx;" mode="aspectFill"></image>
              </view>
              <view class="info-wappar">
                <view class="name">
                  暗影岛 佛耶戈
                </view>
                <view class="pub-data">
                  10分钟前 · 1.2w人看过
                </view>
              </view>
            </navigator>
            <view class="poster-action-right">
              <view class="focus-btn" :class="{focused: isFocus}" @click="onFocusHandler">
                {{isFocus ? '已关注' : "关注"}}
              </view>
              <navigator url="/thirdpkg/center-contact/center-contact?type=user" class="cotact-btn iconfont"
                hover-class="none">
                &#xe60a;
              </navigator>
              <view class="report-btn iconfont">
                &#xe611;
              </view>
            </view>
          </view>
          <!-- 帖子内容 -->
          <view class="post-info-box">
            <view class="post-title">
              <text>淘宝上面买的Teva的凉鞋，37码，全新，只试穿过一次，很新，现在399元出了。</text>
            </view>
            <view class="post-img" v-if="post.picture_list.length !== 0">
              <swiper class="swiper-wrap" :indicator-dots="true">
                <swiper-item v-for="(item, index) in post.picture_list" :key="index"
                  @click="onPreviewPicture(post.picture_list, index)">
                  <view class="swiper-item">
                    <image :src="item" mode="aspectFit" style="width: 100%;height:400rpx"></image>
                  </view>
                </swiper-item>
              </swiper>
            </view>
          </view>
          <view class="footer-icons">
            <view class="hot-count">
              <view class="icon iconfont">
                &#xe609;
              </view>
              <view class="count">
                1.4w
              </view>
            </view>
            <view class="favor-count">
              <view class="icon iconfont">
                &#xe60f;
              </view>
              <view class="count">
                987
              </view>
            </view>
          </view>
          <view class="request-post-sign" v-if="isRequest">
            （已投递）
          </view>
        </view>
        <!-- 下方评论 -->
        <view class="post-comment-body">
          <view class="title-hd">
            <view class="title">
              评论（1009）
            </view>
            <view class="icon iconfont">
              &#xe60e;
            </view>
          </view>
          <view class="comment-container">
            <view class="comment-list">
              <block v-for="commentItem in commentList" :key="commentItem.id">
                <comment-item :comment-item="commentItem"></comment-item>
              </block>
            </view>
          </view>
        </view>
      </z-paging>
    </view>
    <!-- 底部评论输入栏 -->
    <view class="reply-mask" v-show="isReply" @click="isReply = false"></view>
    <view class="footer-reply-wrap" :style="{bottom: ipt_bottom + 'px' }">
      <view class="ipt-box">
        <input class="input" type="text" placeholder="友善评论，温暖你我"
          placeholder-style="font-size: 24rpx;line-height: 24rpx;" :adjust-position="false" @focus="inputFocus"
          :always-embed="true" @blur="inputBlur" @click="isReply = true">
      </view>
      <navigator url="/thirdpkg/post-detail/components/request-post/request-post" class="request-btn iconfont"
        hover-class="none" v-if="postType === '求购'">
        &#xe8ad;
      </navigator>
      <view class="hot-btn iconfont" v-else>
        &#xe609;
      </view>
      <view class="circle-btn iconfont" v-if="postType === '求购'">
        &#xe608;
      </view>
      <view class="favor-btn iconfont" v-else>
        &#xe60f;
      </view>
    </view>
    <!-- 消息提示 -->
    <cc-toast ref="ccToast"></cc-toast>
  </view>
</template>

<script>
  import {
    mapState
  } from "vuex";
  import getNaviHeight from "@/mixins/get-NavigationBar_Height.js"
  import ccToast from "@/components/cc-toast/cc-toast.vue"
  import commentItem from "@/components/comment-item/comment-item.vue"
  export default {
    mixins: [getNaviHeight],
    computed: {
      ...mapState("m_app", ["bangs_Height"])
    },
    data() {
      return {
        ipt_bottom: 0,
        isFocus: false, //是否关注
        isReply: false, //是否回复
        isRequest: false, // 是否投递
        postType: '',
        post: {
          picture_list: []
        },
        idlePostsList: [{
          id: 1,
          user_avatar: "/static/avatar.png",
          user_name: "暗裔   亚克托斯",
          pub_time: "10分钟前",
          views_count: "1.2w",
          hot_count: "1.1w",
          post_title: "淘宝上面买的Teva的凉鞋，37码，全新，只试穿过一次，很新，现在399元出了。",
          post_cover: "/static/post-cover3.png",
          picture_list: [
            "/static/post-cover3.png",
            "/static/post-cover4.png"
          ]
        }],
        buyPostsList: [{
          id: 2,
          user_avatar: "/static/avatar.png",
          user_name: "暗裔   亚克托斯",
          pub_time: "10分钟前",
          views_count: "1.2w",
          hot_count: "1.1w",
          post_title: "求购一本2022年版本的毛泽东思想，后天考试，急急急急急急急急急！！！",
          post_cover: "",
          picture_list: []
        }],
        demoList: [],
        commentList: [{
            id: 1001,
            user: '暗裔   亚克托斯',
            avatar: '/static/avatar.png',
            time: '10分钟前',
            text: '我感觉吧，这么贵的鞋子很难卖出去啊，你试穿了一次的话你应该可以退货吧？',
            favor_num: 213,
            is_favor: false,
            subCommentList: [{
                id: 1,
                user: '暗影岛   佛耶戈（帖主）',
                avatar: '/static/user.png',
                time: '9分钟前',
                text: '这双鞋是全球购，没有质量问题的话是退不了的。',
                favor_num: 21,
                is_favor: false,
                is_reply: false,
                reply_user: ''
              },
              {
                id: 2,
                user: '暗裔   亚克托斯',
                avatar: '/static/avatar.png',
                time: '9分钟前',
                text: '好吧，原来是这个原因啊，我刚刚帮你推了，希望你早点卖出去。',
                favor_num: 3,
                is_favor: false,
                is_reply: true,
                reply_user: '暗影岛   佛耶戈（帖主） '
              }
            ]
          },
          {
            id: 2001,
            user: '德玛西亚   拉克丝',
            avatar: '/static/my-avatar.png',
            time: '11分钟前',
            text: '我感觉降降价应该有人买，哈哈哈。',
            favor_num: 212,
            is_favor: false,
            subCommentList: []
          }
        ], // demo data
      };
    },
    onLoad(options) {
      this.postType = options.postType

      this.ipt_bottom = this.bangs_Height
      this.postType === '求购' ? this.post = this.buyPostsList[0] : this.post = this.idlePostsList[0]
      console.log(this.utils.formatBeforeDate(new Date(2023, 8, 10, 0, 14)));
      uni.$on('requestSucc', () => {
        this.$refs.ccToast.show({
          toastText: "投递成功"
        })
      })

      // 演示数据
      this.demoList = this.commentList
      this.$refs.paging.reload()
    },
    onUnload() {
      uni.$off('requestSucc')
    },
    methods: {
      inputFocus: function(e) {
        setTimeout(() => {
          this.ipt_bottom = e.detail.height + this.bangs_Height
        }, 1)
      },
      inputBlur: function(e) {
        this.isReply = false
        this.ipt_bottom = this.bangs_Height
      },

      // 点击关注
      onFocusHandler: function() {
        if (this.isFocus === true) {
          this.isFocus = false
          this.$refs.ccToast.show({
            toastText: "取消关注",
          })
        } else {
          this.isFocus = true
          this.$refs.ccToast.show({
            toastText: "关注成功",
          })
        }
      },

      // 全屏预览图片
      onPreviewPicture: function(picList, current) {
        uni.previewImage({
          urls: picList,
          current: current
        })
      },

      // 请求
      onQuery: function() {
        this.$refs.paging.complete(this.demoList)
      }
    },
    components: {
      ccToast,
      commentItem
    }
  }
</script>

<style lang="scss">
  .post-detail-container {
    height: 100%;

    .top-left-navigator {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 20px;
      font-size: 16px;
      line-height: 16px;
      color: #000;
    }

    .top-title-bar {}

    .main-post-detail {
      box-sizing: border-box;
      width: 100%;
      padding: 0 40rpx;

      .post-detail-head {
        padding-top: 20rpx;

        .poster-info-hd {
          display: flex;

          .poster-info-left {
            flex: 1;
            display: flex;
            align-items: center;

            .info-wappar {
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: space-evenly;
              margin-left: 30rpx;

              .name {
                font-weight: 600;
              }

              .pub-data {
                color: #0191FF;
                font-size: 20rpx;
              }
            }
          }

          .poster-action-right {
            // flex: 1;
            display: flex;
            align-items: center;

            .focus-btn {
              width: 100rpx;
              height: 60rpx;
              border-radius: 40rpx;
              background-color: #000000;
              text-align: center;
              line-height: 60rpx;
              color: #FFF;
              margin-right: 28rpx;
            }

            .focused {
              background-color: #B7B7B7;
            }

            .cotact-btn {
              font-size: 50rpx;
              line-height: 50rpx;
              color: #000000;
              margin-right: 14rpx;
            }

            .report-btn {
              font-size: 52rpx;
              line-height: 52rpx;
              color: #000000;
            }
          }
        }

        .post-info-box {
          margin-top: 30rpx;

          .post-title {
            font-size: 28rpx;
          }

          .post-img {
            margin-top: 10rpx;

            .swiper-wrap {
              width: 100%;
              height: 400rpx;

            }
          }
        }

        .footer-icons {
          height: 88rpx;
          margin-top: 20rpx;
          display: flex;
          justify-content: space-evenly;

          .hot-count,
          .favor-count {
            width: 52rpx;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;

            .icon {
              font-size: 52rpx;
              line-height: 52rpx;
              color: #000000;
            }

            .count {
              font-size: 20rpx;
            }
          }
        }

        .request-post-sign {
          margin: 20rpx 0;
          text-align: right;
          font-size: 28rpx;
          font-weight: 600;
        }
      }

      .post-comment-body {
        margin-top: 40rpx;

        .title-hd {
          display: flex;
          justify-content: space-between;

          .title {
            font-size: 32rpx;
          }

          .icon {
            color: #000000;
            font-size: 40rpx;
            line-height: 40rpx;
          }
        }

        .comment-container {}
      }
    }

    .footer-reply-wrap {
      position: fixed;
      display: flex;
      align-items: center;
      width: 100%;
      background-color: #FFF;
      height: 100rpx;
      z-index: 10001;

      .ipt-box {
        box-sizing: border-box;
        width: 500rpx;
        height: 72rpx;
        background-color: #F0F0F0;
        border-radius: 40rpx;
        padding: 14rpx 28rpx;
        margin: 0 40rpx;

        .input {
          width: 100%;
          height: 100%;
        }
      }

      .hot-btn,
      .request-btn,
      .circle-btn,
      .favor-btn {
        font-size: 52rpx;
        line-height: 52rpx;
        color: #000000;
      }

      .request-btn {
        color: #EA2D48;
      }

      .favor-btn,
      .circle-btn {
        margin-left: 40rpx;
      }
    }

    .reply-mask {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #000;
      opacity: 0.2;
      z-index: 10000;
    }
  }
</style>